<script setup lang="ts">
import type { ButtonProps } from 'element-plus'
import {
  ref,
  useAttrs,
} from 'vue'

defineOptions({ inheritAttrs: false })

const props = defineProps<Partial<Omit<ButtonProps, 'loading'>>>()
const attrs = useAttrs()
const loading = ref(false)

async function onClick() {
  try {
    loading.value = true
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-expect-error
    await attrs?.onClick?.()
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <ElButton
    v-bind="props"
    :loading="loading"
    @click="onClick"
  >
    <slot />
  </ElButton>
</template>
